"use client"
import styles from './welcome.module.scss'
import mangosteen from 'public/icons/user/mangosteen.svg?url'
import pig from 'public/icons/user/pig.svg?url'
import clock from 'public/icons/user/clock.svg?url'
import chart from 'public/icons/user/chart.svg?url'
import cloud from 'public/icons/user/cloud.svg?url'
import Image from 'next/image'
import { useState, useEffect, useRef,createRef,useCallback} from 'react'
import {throttle} from '@/hooks/throttle'
import { CSSTransition, TransitionGroup} from 'react-transition-group'
import { useRouter } from 'next/navigation'
import {useSwipe} from '@/hooks/useSwipe'
export default function Welcome(){
  const welcomeArr = [
    { icon: pig, prefixTitle: '会挣钱', suffixTitle: '还要会省钱', nodeRef: createRef<HTMLElement>() },
    { icon: clock, prefixTitle: '每日提醒', suffixTitle: '不遗漏每一笔账单', nodeRef: createRef<HTMLElement>() },
    { icon: chart, prefixTitle: '数据可视化', suffixTitle: '收支一目了然', nodeRef: createRef<HTMLElement>() },
    { icon: cloud, prefixTitle: '云备份', suffixTitle: '再也不怕数据丢失', nodeRef: createRef<HTMLElement>() },
  ]
  const router = useRouter()

  const [adIndex, setAdIndex] = useState(0)
  const adIndexRef = useRef(adIndex)
  useEffect(() => {
    adIndexRef.current = adIndex
  }, [adIndex])
  const handNext = useCallback(throttle(() => {
    if(adIndexRef.current === 3){
      router.push('/home/billPage')
    }else{
      setAdIndex(prev => prev + 1)
    }
  }, 1000),[])
  const handleSkipAd = () => {
    localStorage.setItem('skipAd', 'yes')
    router.push('/home/billPage')
  }

  const main = useRef<HTMLElement>(null)
  const { swiping, direction } = useSwipe(main)
  useEffect(() => {
    if(swiping && direction === 'left'){
      handNext([])
    }
  }, [swiping, direction])
  return(
    <div className={styles.welcomePage}>
      <header>
        <Image src={mangosteen} priority alt="Logo" width={64} height={68} className="h-[68px] w-[64px]"/>
        <h1>蓝莓记账</h1>
      </header>
      <section ref={main}>
        <TransitionGroup className={styles.adWrap} component='main'>
        {welcomeArr.map(({icon,prefixTitle,suffixTitle,nodeRef},aIndex) => (
          adIndex === aIndex ? 
          <CSSTransition key={aIndex} timeout={500}
            nodeRef={nodeRef}
            classNames={{
              enter: styles.enter,
              enterActive: styles.enterActive,
              exit: styles.exit,
              exitActive: styles.exitActive,
            }}>
            <section key={aIndex} ref={nodeRef}>
              <Image src={icon} priority alt="Logo" className="h-[150px] w-[150px]"/>
              <h2>{prefixTitle}<br/>{suffixTitle}</h2>
            </section>
          </CSSTransition>
            : null
        ))}
        </TransitionGroup>
      </section>
      <footer className={`${adIndex === 3 ? styles.finish: ''}`}>
        {adIndex !== 3 && <span className={styles.fake}>fake</span>}
        <span onClick={handNext}>{ adIndex === 3 ? '完成' : '下一页' }</span>
        {adIndex !== 3 && <span onClick={handleSkipAd}>跳过</span>}
      </footer>
    </div>
  )
}